<template>
  <el-dialog
    top="80px"
    :visible.sync="isVisible"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-container>
      <el-main :style="{ 'max-height': maxHeightDialog }">
        <t-detail
          v-if="detailList.length != 0"
          :list="detailList"
          :is-title="true"
          :title="'基本信息'"
          :is-card-border="true"
        >
          <template v-if="item.value != ''" slot="status" slot-scope="{ item }">
            <el-tag
              size="small"
              :style="item.value | constantKeyTagStyleObj('DEVICE_STATUS')"
            >
              {{ item.value | constantKeyValue('DEVICE_STATUS') }}
            </el-tag>
          </template>
          <template
            v-if="item.value != ''"
            slot="manufacturingDate"
            slot-scope="{ item }"
          >
            {{ item.value | datefmt('YYYY-MM-DD') }}
          </template>
          <template
            v-if="item.value != null"
            slot="active"
            slot-scope="{ item }"
          >
            <el-tag
              size="small"
              :style="item.value | constantKeyTagStyleObj('BOOL_TYPE')"
            >
              {{ item.value ? '已激活' : '未激活' }}
            </el-tag>
          </template>
        </t-detail>
        <div>
          <div class="title">
            <span>数据日志</span>
          </div>
          <el-card class="card" shadow="never">
            <div class="attribute-list">
              <device-attribute-list :source-list="monitorLogList" />
            </div>
          </el-card>
        </div>
      </el-main>
      <el-footer>
        <el-button
          size="medium"
          icon="el-icon-close"
          style="width: 120px"
          @click="isVisible = false"
        >
          关闭
        </el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>
<script>
import DeviceAttributeList from './AttributeList'
import TDetail from '@/components/TDetail'

import dataDetailMixins from '@/mixins/data-detail-mixins'

import deviceManageApi from '@/api/device-manage'

export default {
  name: 'DeviceDetail',
  components: {
    DeviceAttributeList,
    TDetail,
  },
  mixins: [dataDetailMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    params: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      monitorLogList: [],
      detailList: this.getDetailList('start'),
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.toClose()
      },
    },
  },
  created() {
    // this.getDetailList()
  },
  mounted() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      // this.detailObj = { ...this.params.item }
      this.loading = true
      deviceManageApi
        .getSurveySmokeDetail({ id: this.params.item.id })
        .then((ret) => {
          this.detailObj = ret.data.data
          this.deviceTypeDictionaries()
        })
        .catch(() => {
          this.loading = false
        })
    },
    deviceTypeDictionaries() {
      this.$get('system/dict/getDictValueAttr', {
        fieldName: 'collect_type',
        tableName: 't_equipment_collect',
      }).then((r) => {
        const deviceDictionaries = r.data.dictValue
        const deviceList = deviceDictionaries.filter(
          (e) => e.dictValue === Number(this.detailObj.deviceType)
        )
        if (deviceList.length > 0) {
          this.detailObj['deviceTypeStr'] = deviceList[0].dictText
        }
        this.detailList = this.getDetailList('')
        this.monitorLogList = this.detailObj.equipmentMonitorLogList
        this.loading = false
      })
    },
    getDetailList(type) {
      const list = [
        [
          {
            text: '设备名称',
            value: type === 'start' ? '' : this.detailObj.deviceName,
          },
          {
            text: '设备编号',
            value: type === 'start' ? '' : this.detailObj.deviceSource,
          },
        ],
        [
          {
            text: '所属网格',
            value: type === 'start' ? '' : this.detailObj.gridMountFullPathText,
          },
          {
            text: '所属部门',
            value: type === 'start' ? '' : this.detailObj.deptName,
          },
        ],
        [
          {
            text: '使用情况',
            value: type === 'start' ? '' : this.detailObj.status,
            slotName: 'status',
            isTag: true,
          },
          {
            text: '设备类型',
            value: type === 'start' ? '' : this.detailObj.deviceTypeStr,
          },
        ],
        [
          {
            text: '设备运行状态',
            value: type === 'start' ? '' : this.detailObj.deviceRunningState,
          },
          {
            text: '设备型号',
            value: type === 'start' ? '' : this.detailObj.deviceModel,
          },
        ],

        [
          {
            text: '厂家',
            value: type === 'start' ? '' : this.detailObj.manufactor,
          },
          {
            text: '生产日期',
            value: type === 'start' ? '' : this.detailObj.manufacturingDate,
            slotName: 'manufacturingDate',
          },
        ],
        [
          {
            text: '设备位置',
            value: type === 'start' ? '' : this.detailObj.deviceLocation,
          },
          {
            text: '设备配置',
            value: type === 'start' ? '' : this.detailObj.deviceParameter,
          },
        ],
        [
          {
            text: '经度',
            value: type === 'start' ? '' : this.detailObj.longitude,
          },
          {
            text: '纬度',
            value: type === 'start' ? '' : this.detailObj.latitude,
          },
        ],
        [
          {
            text: '设备是否激活',
            value: type === 'start' ? null : this.detailObj.isActive,
            slotName: 'active',
          },
          {
            text: '激活时间',
            value: type === 'start' ? '' : this.detailObj.activationTime,
          },
        ],
      ]
      return list
    },
    toClose() {
      this.$emit('close')
    },
  },
}
</script>

<style scoped>
.detail-div {
  border: 1px solid #d5dbe0;
  border-right: 0px solid #d5dbe0;
  border-bottom: 0px solid #d5dbe0;
}
.detail-row {
  border-bottom: 1px solid #d5dbe0;
  display: flex;
}
.detail-label {
  width: 20%;
  border-right: 1px solid #d5dbe0;
  padding: 4px;
  text-align: right;
  color: #525e8c;
  background: #f9fcfd;
}
.detail-value {
  width: 30%;
  border-right: 1px solid #d5dbe0;
  padding: 4px;
}
.attribute-list >>> .el-table td:last-child {
  border-left: 0px solid #ebeef5;
}
</style>
